<template>
	<div class="noteDetail" :style="{width:width+'px'}">
		<textarea class="textarea" :value="activeNoteText" @input="editNote"></textarea>
	</div>
</template>
<script>
	import {mapGetters} from 'vuex'
	export default {
		data () {
			return {
				width:200
			}
		},
		components: {

		},
		computed:mapGetters({
			activeNoteText:'activeNoteText'
		}),
		created () {
			this.width=document.body.clientWidth-540
		},
		methods: {
			editNote (e) {
				this.$store.commit('EDIT_NOTE', e.target.value)
			}
		}
	}
</script>
<style>
	.noteDetail{
		height:100%;
		background:#F5F5F5;
		text-align: center;
		float:left;
	}
	.textarea{
		height:100%;
		width:100%;
		border:none;
		outline:none;
		padding:10px;
	}
</style>